<template>
  <view class="cartbox">
    <!-- 存在商品数据的结构 -->
    <view class="cart" v-if="cart.length">
      <!-- 收货地址区域 -->
      <my-address></my-address>
      <!-- 商品列表区域 -->
      <view class="list">
        <view class="title">
          <uni-icons class="myicon" type="shop" size="18"></uni-icons>
          购物车
        </view>
        <view class="goodslist">
          <uni-swipe-action>
            <block v-for="(item, index) in cart" :key="index">
              <uni-swipe-action-item :right-options="options" @click="handlerClick(item.goods_id)">
                <my-goods @radio-change="radioChange" @num-change="numChange" :showNum="true" :showRadio="true"
                  :item="item">
                </my-goods>
              </uni-swipe-action-item>
            </block>
          </uni-swipe-action>
        </view>
      </view>
      <!-- 结算区域 -->
      <my-total></my-total>
    </view>
    <!-- 不存在商品数据的结构 -->
    <view class="no-cart" v-else>
      <image class="myimage" src="../../static/cart_empty@2x.png" mode=""></image>
      空空如也
    </view>
  </view>
</template>

<script>
  import mymixins from '../../mixins/mymixins.js'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    computed: {
      ...mapState('cart', ['cart']),
      ...mapGetters('cart', ['total'])
    },
    watch: {
      total: function(newV) {
        // 重置设置 tabBar 徽标
        uni.setTabBarBadge({
          text: newV + '',
          index: 2
        })
      }
    },
    data() {
      return {
        // 设置滑动后的 ui 结构
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#c00000'
          }
        }]
      };
    },
    methods: {
      ...mapMutations('cart', ['changeStatus', 'changeCount', 'removeGoods']),
      // 点击单选框，要修改状态
      radioChange(e) {
        this.changeStatus(e)
      },
      // 点击 numbox 组件的 + - 按钮时会触发
      numChange(e) {
        this.changeCount(e)
      },
      // 删除商品数据
      handlerClick(goods_id) {
        this.removeGoods(goods_id)
      }
    },
    // 使用混入
    mixins: [mymixins]
  }
</script>

<style lang="scss" scoped>
  .cart {
    margin-bottom: 80px;

    .list {
      .title {
        padding-left: 8px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;

        .myicon {
          padding-right: 10px;
        }
      }
    }
  }

  .no-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 300rpx;
    font-size: 12px;
    color: #999;

    .myimage {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 40rpx;
    }
  }
</style>
